﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <title>jqxEditor API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
      <div id="properties">
            <h2 class="documentation-top-header">Properties</h2>
            <table class="documentation-table">
                <tr>
                    <th>Name
                    </th>
                    <th>Type
                    </th>
                    <th>Default
                    </th>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span6'>createCommand</span>
                    </td>
                    <td>
                        <span>Function</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the jqxEditor's createCommand property. The property allows you to add new commands or override existing commands.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>createCommand</code> property in order to create new commands.
                            </p>
                            <pre><code>
$('#editor').jqxEditor({
    height: 400,
    width: 800,
    tools: 'datetime | print clear | backcolor | font bold italic underline',
    createCommand: function (name) {
        switch (name) {
            case "datetime":
                return {
                    type: 'list',
                    tooltip: "Insert Date/Time",
                    init: function (widget) {
                        widget.jqxDropDownList({ placeHolder: "Insert Custom HTML", width: 160, source: ['Insert Time', 'Insert Date'], autoDropDownHeight: true });
                    },
                    refresh: function (widget, style) {
                        // do something here when the selection is changed.
                        widget.jqxDropDownList('clearSelection');
                    },
                    action: function (widget, editor) {
                        var widgetValue = widget.val();
                        var date = new Date();
                        // return object with command and value members.
                        return { command: "inserthtml", value: widgetValue == "Insert Time" ? date.getHours() + ":" + date.getMinutes() : date.getDate() + "-" + date.getMonth() + "-" + date.getFullYear() };
                    }
                }
            case "print":
                return {
                    type: 'button',
                    tooltip: 'Print',
                    init: function (widget) {
                        widget.jqxButton({ height: 25, width: 40 });
                        widget.html("&lt;span style='line-height: 23px;'&gt;Print&lt;/span&gt;");
                    },
                    refresh: function (widget, style) {
                        // do something here when the selection is changed.
                    },
                    action: function (widget, editor) {
                        // return nothing and perform a custom action.
                        $('#editor').jqxEditor('print');
                    }
                }
            case "clear":
                return {
                    type: 'button',
                    tooltip: 'Clear',
                    init: function (widget) {
                        widget.jqxButton({ height: 25, width: 40 });
                        widget.html("&lt;span style='line-height: 23px;'&gt;Clear&lt;/span&gt;");
                    },
                    refresh: function (widget, style) {
                        // do something here when the selection is changed.
                    },
                    action: function (widget, editor) {
                        // return nothing and perform a custom action.
                        $('#editor').val('');
                    }
                }
            case "backcolor":
                return {
                    type: 'colorPicker',
                    tooltip: 'Background',
                    init: function (widget) {
                        widget.jqxDropDownButton({ width: 160 });
                        widget.jqxDropDownButton('setContent', '&lt;span style="line-height: 23px;"&gt;Choose Background&lt;/span&gt;');
                    },
                    refresh: function (widget, style) {
                        // do something here when the selection is changed.
                    },
                    action: function (widget, editor) {
                        // return nothing and perform a custom action.
                        var color = widget.val();
                        editor.css('background', color);
                    }
                }
        }
    }
});
                         </code></pre>
                            <p>Set the <code>createCommand</code> property to override existing commands.</p>
                            <pre><code>
$('#editor').jqxEditor({
    height: 400,
    width: 800,
    tools: "bold italic underline | font size | left center right | outdent indent",
    createCommand: function (name) {
        switch (name) {
            case "font":
                return {
                    init: function (widget) {
                        widget.jqxDropDownList({
                            source: [{ label: 'Arial', value: 'Arial, Helvetica, sans-serif' },
                                    { label: 'Comic Sans MS', value: '"Comic Sans MS", cursive, sans-serif' },
                                    { label: 'Courier New', value: '"Courier New", Courier, monospace' },
                                    { label: 'Georgia', value: "Georgia,serif" }]
                        });
                    }
                }
            case "size":
                return {
                    init: function (widget) {
                        widget.jqxDropDownList({
                            source: [
                                { label: "8pt", value: "xx-small" },
                                { label: "12pt", value: "small" },
                                { label: "18pt", value: "large" },
                                { label: "36pt", value: "xx-large" }
                            ]
                        });
                    }
                }
        }
    }
});
</code></pre>
                            <p>
                                Get the <code>createCommand</code> property.
                            </p>
                            <pre><code>var createCommand = $('#jqxEditor').jqxEditor('createCommand');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zuBu9/">createCommand is set to a custom function.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span2'>disabled</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets whether the jqxEditor is disabled.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>disabled</code> property.
                            </p>
                            <pre><code>$('#jqxEditor').jqxEditor({ disabled:true }); </code></pre>
                            <p>
                                Get the <code>disabled</code> property.
                            </p>
                            <pre><code>var disabled = $('#jqxEditor').jqxEditor('disabled');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mksnT/">disabled is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span9'>editable</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>true
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the jqxEditor's editable property. The property determines whether the jqxEditor is read only.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>editable</code> property.
                            </p>
                            <pre><code>$('#jqxEditor').jqxEditor({editable: true});</code></pre>
                            <p>
                                Get the <code>editable</code> property.
                            </p>
                            <pre><code>var editable = $('#jqxEditor').jqxEditor('editable');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SNMX3/">editable is set to false</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span1'>height</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the jqxEditor's height.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>height</code> property.
                            </p>
                            <pre><code>$('#jqxEditor').jqxEditor({height:"400px"});</code></pre>
                            <p>
                                Get the <code>height</code> property.
                            </p>
                            <pre><code>var height = $('#jqxEditor').jqxEditor('height');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XvXyy/">height is set to '400px'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span4'>lineBreak</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>"default"
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the jqxEditor's line break. The property determines whether the jqxEditor creates <code>BR</code>, <code>P</code> or <code>DIV</code> tag when the <code>Enter</code> key is pressed or uses the web browser's default mode.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>lineBreak</code> property.
                            </p>
                            <pre><code>$('#jqxEditor').jqxEditor({lineBreak:"div"});</code></pre>
                            <p>
                                Get the <code>lineBreak</code> property.
                            </p>
                            <pre><code>var lineBreak = $('#jqxEditor').jqxEditor('lineBreak');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Bpjz7/">lineBreak is set to 'div'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span7'>localization</span>
                    </td>
                    <td>
                        <span>Object</span>
                    </td>
                    <td>{
                                                                            "bold": "Bold",
                                                                            "italic": "Italic",
                                                                            "underline": "Underline",
                                                                            "format": "Format Block",
                                                                            "font": "Font Name",
                                                                            "size": "Font Size",
                                                                            "color": "Text Color",
                                                                            "background": "Fill Color",
                                                                            "left": "Align Left",
                                                                            "center": "Align Center",
                                                                            "right": "Align Right",
                                                                            "outdent": "Indent Less",
                                                                            "indent": "Indent More",
                                                                            "ul": "Insert unordered list",
                                                                            "ol": "Insert ordered list",
                                                                            "image": "Insert image",
                                                                            "link": "Insert link",
                                                                            "html": "View source",
                                                                            "clean": "Remove Formatting"
                                                                            }
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the jqxEditor's localization. The property determines the localization of the jqxEditor.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>localization</code> property.
                            </p>
                            <pre><code>
$('#editor').jqxEditor({
    localization: {
        "bold": "Fett",
        "italic": "Kursiv",
        "underline": "Unterstreichen",
        "format": "Block-Format",
        "font": "Schriftname",
        "size": "Schriftgröße",
        "color": "Textfarbe",
        "background": "Hintergrundfarbe",
        "left": "Links ausrichten",
        "center": "Mitte ausrichten",
        "right": "Rechts ausrichten",
        "outdent": "Weniger Einzug",
        "indent": "Mehr Einzug",
        "ul": "Legen Sie ungeordnete Liste",
        "ol": "Geordnete Liste einfügen",
        "image": "Bild einfügen",
        "link": "Link einfügen",
        "html": "html anzeigen",
        "clean": "Formatierung entfernen"
    }
});
                        </code></pre>
                            <p>
                                Get the <code>localization</code> property.
                            </p>
                            <pre><code>var localization = $('#jqxEditor').jqxEditor('localization');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Kw3QQ/">localization is set to a custom object.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span3'>pasteMode</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>"html"
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the jqxEditor's paste mode. The property determines whether the clipboard data is pasted as HTML or Plain Text. Possible values: "html" and "text".
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>pasteMode</code> property.
                            </p>
                            <pre><code>$('#jqxEditor').jqxEditor({pasteMode:"html"});</code></pre>
                            <p>
                                Get the <code>pasteMode</code> property.
                            </p>
                            <pre><code>var pasteMode = $('#jqxEditor').jqxEditor('pasteMode');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kyf35/">pasteMode is set to 'text'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span51'>rtl</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.</p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>rtl</code> property.
                            </p>
                            <pre><code>$('#jqxEditor').jqxEditor({rtl : true}); </code></pre>
                            <p>
                                Get the <code>rtl</code> property.
                            </p>
                            <pre><code>var rtl = $('#jqxEditor').jqxEditor('rtl'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/e96VD/">rtl is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span10'>stylesheets</span>
                    </td>
                    <td>
                        <span>Array</span>
                    </td>
                    <td>[]
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the jqxEditor's stylesheets. The property allows you to include stylesheets into the jqxEditor's IFrame.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>stylesheets</code> property.
                            </p>
                            <pre><code>$('#jqxEditor').jqxEditor({stylesheets:["../../jqwidgets/styles/jqx.base.css"]);</code></pre>
                            <p>
                                Get the <code>stylesheets</code> property.
                            </p>
                            <pre><code>var stylesheets = $('#jqxEditor').jqxEditor('stylesheets');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/aV8kG/">stylesheets is set to a custom array.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span63'>theme</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>''
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets the widget's theme.
                            </p>
                            jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.
                                                                                In order to set a theme, you need to do the following:
                                                                                <ul>
                                                                                    <li>Include the theme's CSS file after jqx.base.css.<br />
                                                                                        The following code example adds the 'energyblue' theme.
                                                                                        <pre><code>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot; type=&quot;text/css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.energyblue.css&quot; type=&quot;text/css&quot; /&gt;
</code></pre>
</code></pre>
                                                                                    </li>
                                                                                    <li>Set the widget's theme property to 'energyblue' when you initialize it.
                                                                                    </li>
                                                                                </ul>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/j5kD6/">theme is set to 'energyblue'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span5'>toolbarPosition</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>"top"
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the jqxEditor's toolbar position. The property determines the position of the jqxEditor's toolbar.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>toolbarPosition</code> property.
                            </p>
                            <pre><code>$('#jqxEditor').jqxEditor({toolbarPosition:"bottom"});</code></pre>
                            <p>
                                Get the <code>toolbarPosition</code> property.
                            </p>
                            <pre><code>var toolbarPosition = $('#jqxEditor').jqxEditor('toolbarPosition');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LdK5D/">toolbarPosition is set to 'bottom'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span8'>tools</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>"bold italic underline | format font size | color background | left center right | outdent indent | ul ol | image | link | clean | html"
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the jqxEditor's tools. The property determines the visibility and layout of the jqxEditor's tools.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>tools</code> property.
                            </p>
                            <pre><code>$('#jqxEditor').jqxEditor({tools:"bold italic underline"});</code></pre>
                            <p>
                                Get the <code>tools</code> property.
                            </p>
                            <pre><code>var tools = $('#jqxEditor').jqxEditor('tools');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/n4e23/">tools is set to "bold italic underline"</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="documentation-option-type-click">
                        <span id='property-name-disabled'>width</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the jqxEditor's width.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>width</code> property.
                            </p>
                            <pre><code>$('#jqxEditor').jqxEditor({width:"200px"});</code></pre>
                            <p>
                                Get the <code>width</code> property.
                            </p>
                            <pre><code>var width = $('#jqxEditor').jqxEditor('width');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XvXyy/">width is set to '800px'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <h2 class="documentation-top-header">Events</h2>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span13'>change</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This is triggered when the jqxEditor's value is changed.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Bind to the <code>change</code> event by type: jqxEditor.
                            </p>
                            <pre><code>
$('#jqxEditor').on('change', function (event) {
    // type
    var type = event.args.type; // keyboard, mouse or null depending on how the value was changed.                                              
}); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/L2Aek/">Bind to the change event by type:jqxEditor </a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <h2 class="documentation-top-header">Methods</h2>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span21'>destroy</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Destroys the widget.
                            </p>
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples</h4>
                            <p>
                                Invoke the <code>destroy</code> method.
                            </p>
                            <pre><code>$('#jqxEditor').jqxEditor('destroy'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/j63LP/">destroys the jqxEditor </a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span14'>focus</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Focuses the widget.
                            </p>
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples</h4>
                            <p>
                                Invoke the <code>focus</code> method.
                            </p>
                            <pre><code>$('#jqxEditor').jqxEditor('focus'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/skXv7/">focuses the jqxEditor </a>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span12'>print</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Prints the jqxEditor's value.
                            </p>
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples</h4>
                            <p>
                                Invoke the <code>print</code> method.
                            </p>
                            <pre><code>$('#jqxEditor').jqxEditor('print'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Jw75s/">prints the jqxEditor's value.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span11'>setMode</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets the jqxEditor's mode. The method has one boolean parameter which determines whether the jqxEditor displays its value as formatted html or html code.
                            </p>
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>mode</em></td>
                                            <td>Boolean</td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples</h4>
                            <p>
                                Invoke the <code>setMode</code> method.
                            </p>
                            <pre><code>$('#jqxEditor').jqxEditor('setMode', true); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ZGcWL/">display the jqxEditor's html code.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span59'>val</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the value.
                            </p>
                            <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>htmlValue</em></td>
                                            <td>String</td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>String</em>
                            </div>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>val</code> method.
                            </p>
                            // Get the value.
                                                                                <pre><code>var value = $("#jqxEditor").jqxEditor('val');</code></pre>
                            // Get the value using jQuery's val()
                                                                                <pre><code>var value = $("#jqxEditor").val();</code></pre>
                            // Set value.
                                                                                <pre><code>$("#jqxEditor").jqxEditor('val', 'New Value');</code></pre>
                            // Set value using jQuery's val().
                                                                                <pre><code>$("#jqxEditor").val('New Value');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zxaRL/">invoke the val method of the jqxEditor </a>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <br />
        </div>
</body>
</html>
